import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {
  View,
  Text,
  ListView,
  StyleSheet,
  TouchableOpacity,
  RefreshControl,
  ActivityIndicator
} from 'react-native'

export let PAGE_SIZE = 10

export default class RefreshLoadListView extends Component {
  static propTypes = {
    hasMore: PropTypes.bool,
    dataCount: PropTypes.number,
    pageSize: PropTypes.number,
    headerLoadRefresh: PropTypes.bool,
    hideHeader: PropTypes.bool,
    hideFooter: PropTypes.bool,
    hideSeparator: PropTypes.bool,
    autoLoadMore: PropTypes.bool,
    separatorStyle: PropTypes.object,
    refreshData: PropTypes.func,
    loadMoreData: PropTypes.func,
    scrollCallback: PropTypes.func,
    footerStyle: PropTypes.any,
    footerTextStyle: PropTypes.any
  }

  /**
   * hideHeader
   * hideFooter,
   * headerLoadRefreshd:第一次是否默认显示刷新
   * @param props
   */
  constructor (props) {
    super(props)
    this.state = {
      hasMore: this.props.hasMore !== false,
      isLoading: false,
      pageSize: this.props.pageSize || PAGE_SIZE,
      autoLoadMore: this.props.autoLoadMore === false ? this.props.autoLoadMore : true,
      headerLoadRefresh: props.headerLoadRefresh ? props.headerLoadRefresh : false,
      hideHeader: props.hideHeader ? props.hideHeader : false,
      hideFooter: props.hideFooter ? props.hideFooter : false,
      separatorStyle: props.separatorStyle ? props.separatorStyle : styles.separator,
      hideSeparator: props.hideSeparator ? props.hideSeparator : false
    }
  }

  render () {
    // console.log('....RefreshLoadListView, this.props = ', this.props)
    // console.log('....RefreshLoadListView, this.state = ', this.state)
    return (
      <ListView
        enableEmptySections
        onScroll={this.props.scrollCallback}
        automaticallyAdjustContentInsets={false}
        showsHorizontalScrollIndicator={false}
        showsVerticalScrollIndicator={false}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={20}
        initialListSize={PAGE_SIZE}
        renderSeparator={this.renderSeparator}
        renderFooter={this.renderFooter}
        refreshControl={this.renderRefreshControl()}
        {...this.props}
      />
    )
  }

  renderSeparator = (sectionID, rowID) => {
    if (this.state.hideSeparator) {
      return <View key={`${sectionID}-${rowID}`} style={this.state.separatorStyle} />
    }
    return null
  }

  renderRefreshControl () {
    if (this.state.hideHeader) {
      return <View />
    } else {
      return (
        <RefreshControl
          style={{
            flexDirection: 'column',
            justifyContent: 'center',
            alignItems: 'center'
          }}
          refreshing={this.state.headerLoadRefresh}
          onRefresh={this.onRefresh}
          tintColor='#378efb'
          colors={['#378efb']}
          enabled={!this.state.hideHeader} />
      )
    }
  }

  renderFooter = () => {
    if (this.props.hideFooter) {
      return <View />
    }
    let { dataCount } = this.props
    let { isLoading, hasMore, autoLoadMore } = this.state
    if (isLoading) {
      return this.footLoad()
    } else if (dataCount === 0) {
      return null
    } else if (hasMore === false) {
      return this.footNoMore()
    } else {
      if (autoLoadMore) {
        return this.footLoad()
      } else {
        return this.footClickLoad()
      }
    }
  }

  footClickLoad = () => {
    let { footerStyle, footerTextStyle } = this.props
    return (
      <TouchableOpacity style={[styles.footerContainer, footerStyle]}
        onPress={this.clickLoadMore}>
        <Text style={[styles.footText, footerTextStyle]}>{'点击加载更多'}</Text>
      </TouchableOpacity>
    )
  }

  footLoad = () => {
    let { footerStyle, footerTextStyle } = this.props
    return (
      <View style={[styles.footerContainer, footerStyle]}>
        <ActivityIndicator
          animating
          size='small'
          color={'#C8C8C8'} />
        <Text style={[styles.footText, footerTextStyle]}>{'加载中...'}</Text>
      </View>
    )
  }

  footNoMore = () => {
    let { footerStyle, footerTextStyle } = this.props
    return (
      <View style={[styles.footerContainer, footerStyle]}>
        <Text style={[styles.footText, footerTextStyle]}>{'已经到底了'}</Text>
      </View>
    )
  }

  isPullDown = (pullDown) => {
    this.setState({ headerLoadRefresh: pullDown })
  }

  isLoadUp = (loadUp) => {
    this.setState({ hasMore: loadUp, isLoading: false })
  }

  hideHeader = (hideHeader) => {
    this.setState({ hideHeader: hideHeader })
  }

  hideFooter = (hideFooter) => {
    this.setState({ hideFooter: hideFooter })
  }

  onRefresh = () => {
    if (this.props.refreshData) {
      return this.props.refreshData()
    }
  }

  onEndReached = () => {
    if (this.state.autoLoadMore) {
      if (this.state.hasMore) {
        return this.onLoadMore()
      }
    } else {
      return () => {}
    }
  }

  onLoadMore = () => {
    if (this.props.loadMoreData) {
      return this.props.loadMoreData()
    }
  }

  clickLoadMore = () => {
    if (this.props.loadMoreData) {
      this.setState({ isLoading: true })
      this.onLoadMore()
    }
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'transparent'
  },
  footerContainer: {
    backgroundColor: 'transparent',
    flexDirection: 'row',
    paddingLeft: 15,
    paddingRight: 15,
    paddingBottom: 15,
    paddingTop: 15,
    justifyContent: 'center',
    alignItems: 'center'
  },
  footText: {
    color: '#999999',
    paddingLeft: 12,
    paddingRight: 12,
    fontSize: 12
  },
  footLine: {
    flex: 1,
    height: StyleSheet.hairlineWidth,
    backgroundColor: '#ededed'
  },
  separator: {
    height: 10,
    backgroundColor: '#ededed',
    borderTopWidth: StyleSheet.hairlineWidth,
    borderTopColor: '#ededed',
    borderBottomWidth: StyleSheet.hairlineWidth,
    borderBottomColor: '#ededed'
  }
})
